<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="form" :originOption="originOption" class="grid grid-cols-3" v-if="formShow" />
      </template>
      <template #toolbar_btns>
        <el-button @click="importHandleClick">
          <span class="flex items-center"> <svg-icon icon-class="import" class="mr-[4px]" /> 导出111 </span>
        </el-button>
        <div class="ml-auto"></div>
        <FieldSelectBtn :fieldSelectConfig="fieldSelectConfig" @submit="query" />
      </template>
    </VTable>
    <!-- 导出中心 -->
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  </VPage>
</template>

<script setup lang="jsx">
import { ElMessage, ElMessageBox } from "element-plus"
import XForm from "@/components/XForm/index.vue"
import { onMounted, ref, toRefs } from "vue"

import { salesVolumeList } from "@/api/salesInventory"
const tableRef = ref()

import FieldSelectBtn from "@/views/salesInventory/components/FieldSelectBtn.vue"

// 导出中心
import DerivedCenter from "@/components/DerivedCenter"
const DerivedCenterRef = ref()
const importHandleClick = async (e) => {
  let condition = {}
  DerivedCenterRef.value.open({
    tag_name: "performance_indicators",
    condition,
  })
}

// 查询
const query = () => {
  tableRef?.value.query()
}
const formShow = ref(false)
// 获取下拉数据
// import { getAloneEnum } from "@/utils/enumUtils"
onMounted(async () => {
  // let oneKeys = ["wmsAttribute", "warehouse"]
  // let optData = await getAloneEnum(oneKeys)
  // oneKeys.forEach((key) => {
  //   originOption.value[key] = optData?.[key]
  // })
  setTimeout(() => {
    formShow.value = true
  }, 100)
})

// 枚举 数据
const originOption = ref({})
const formOption = ref({ inline: true })
const publicStyle = { style: { width: "200px" } }
const fieldList = ref([
  {
    field: "sku",
    placeholder: "SKU",
    type: "textarea",
    ...publicStyle,
  },
  {
    field: "shop_id",
    type: "select",
    originField: "platform",
    options: { placeholder: "店铺" },
    ...publicStyle,
  },
  {
    field: "site",
    type: "select",
    originField: "platform",
    options: { placeholder: "站点" },
    ...publicStyle,
  },
  {
    field: "platform",
    type: "select",
    originField: "platform",
    options: { placeholder: "销售平台" },
    ...publicStyle,
  },
  {
    field: "sales_at",
    type: "dateTimeRangeNorm",
    itemProps: {
      type: "daterange",
      valueFormat: "YYYY-MM-DD",
    },
    style: { width: "300px" },
  },
  {
    field: "asin",
    placeholder: "ASIN",
    type: "textarea",
    ...publicStyle,
  },
  {
    field: "seller_sku",
    placeholder: "渠道SKU",
    type: "textarea",
    ...publicStyle,
  },
])
// 初始化时间
import { parseTime } from "@/utils/ruoyi"
const initDate = () => {
  const temp = new Date()
  temp.setTime(temp.getTime() - 3600 * 1000 * 24 * 30)
  return [new Date(temp.setHours(0, 0, 0, 0)), new Date(new Date().setHours(23, 59, 59, 0))].map((d) => parseTime(d, "{y}-{m}-{d}"))
}
// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: { sales_at: initDate() },
  },
  // tooltipConfig: { showAll: true },
  columns: [
    { type: "seq", title: "序号", width: 60 },
    { field: "shop_name", title: "店铺", width: 100 },
    { field: "site", title: "站点", width: 100 },
    { field: "sales_user", title: "销售员", width: 100 },
    { field: "platform", title: "销售平台", width: 100 },
    { field: "warehouse_name", title: "仓库", width: 100 },
    { field: "department_name", title: "组织", width: 100 },
    { field: "category_text", title: "产品品类", width: 100 },
    { field: "brand_name", title: "品牌", width: 100 },
    { field: "custom_sku", title: "自定义SKU", width: 100 },
    { field: "sku", title: "SKU", width: 100 },
    { field: "spu", title: "SPU", width: 100 },
    { field: "asin", title: "ASIN", width: 100 },
    { field: "seller_sku", title: "渠道sku", width: 100 },
    { field: "product_name", title: "产品名称", width: 100 },
    { field: "sales_quantity_total", title: "销量", width: 100 },
    { field: "order_quantity_total", title: "订单数量", width: 100 },
    { field: "average_amount", title: "平均客单价", width: 100 },
    { field: "amount_total", title: "销售额", width: 100 },
    { field: "gross_profit_total", title: "销售毛利", width: 100 },
    { field: "purchase_cost_total", title: "加权采购成本", width: 120 },
    { field: "fba_freight_total", title: "加权头程成本", width: 120 },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => {
        // console.log("query")
        // console.log(form)
        let params = {
          page: page.pageNum,
          page_num: page.pageSize,
          ...initForm(form),
        }
        return queryList(params)
      },
    },
  },
})

import { filterColumns } from "@/views/salesInventory/components/method.js"

const totalKey = ref("")
const queryList = async (params) => {
  // 按筛选条件添加
  let columnsData = [...tableOptins.columns]
  const { columns, key } = filterColumns(columnsData, fieldSelectConfig.value.columnsShow)
  totalKey.value = key
  tableRef?.value?.$table.loadColumn(columns)
  return salesVolumeList(params)
}

// 组装查询条件
const initForm = (form) => {
  let keys = ["sku", "order_number"]
  keys.forEach((key) => {
    form[key] = form[key]?.split("\n")?.filter((v) => !!v.trim())
    form[key] = form[key]?.map((v) => v.trim())
  })
  // if (form.sales_at) {
  //   form.sales_at = {
  //     start: form.sales_at[0],
  //     end: form.sales_at[1],
  //   }
  // }

  return form
}

const fieldSelectConfig = ref({
  save: "pmcSales",
  columnsShow: [],
  columns: [...tableOptins.columns],
})
</script>
<style lang="scss" scoped>
:deep(.vxe-header--row:nth-child(2)) {
  .vxe-header--column {
    background: #eff3fe !important;
  }
}
</style>
